<template>
  <div class="main">
    <div class="table">
      <el-table
        v-if="tableData"
        :data="currentContent"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        height="100%"
        header-cell-class-name="th"
      >
        <el-table-column
          align="center"
          prop="username"
          label="用户名"
          width="120"
        >
        </el-table-column>
        <el-table-column align="center" prop="sex" label="性别" width="200">
        </el-table-column>
        <el-table-column align="center" prop="phone" label="手机" width="200">
        </el-table-column>
        <el-table-column align="center" prop="email" label="邮箱" width="200">
        </el-table-column>
        <el-table-column align="center" label="状态" width="200">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="
                updateUserState({ id: scope.row.id, state: scope.row.state })
              "
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="medium " @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="medium "
              type="danger"
              @click="handleDelete(scope.row.id, scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      v-if="total"
      background
      layout="prev, pager, next"
      :page-count="total"
      :pager-count="5"
      style="text-align: center"
      @current-change="changeIdx"
    >
    </el-pagination>
    <edit-user v-if="edit" :formData="form" @close="edit = false" />
  </div>
</template>

<script>
import { getUsersInfo, deleteUser, updateUserState } from "@network/manager";
import { mapMutations } from "vuex";
import EditUser from "@components/content/EditUser";
export default {
  components: {
    EditUser,
  },
  data() {
    return {
      tableData: null,
      edit: false,
      form: null,
      add: false,
      total: 0,
      line: 10,
      activeIndex: 0,
    };
  },
  computed: {
    currentContent() {
      let begin = this.activeIndex * this.line,
        end = (this.activeIndex + 1) * this.line;
      console.log(this.tableData.slice(begin, end), begin, end, "index"),
        this.activeIndex;
      return this.tableData.slice(begin, end);
    },
  },
  methods: {
    ...mapMutations(["setNotice"]),
    changeIdx(idx) {
      this.activeIndex = idx - 1;
      console.log(
        "changeIdx",
        this.activeIndex,
        this.tableData,
        this.tableData.slice(this.activeIndex * this.line, this.line)
      );
    },
    tableRowClassName({ row, rowIndex }) {
      return row.state ? "active-row" : "inactive-row";
    },
    // 限制数量方法
    limitFn(list) {
      this.$refs.multipleTable.clearSelection();
      for (let i = 0; i < this.limitNum; i++) {
        this.$refs.multipleTable.toggleRowSelection(list[i]);
      }
    },
    handleEdit(row) {
      this.form = row;
      this.edit = true;
    },

    updateUserState(data) {
      updateUserState({ ...data })
        .then((res) => {
          if (!res.data.tag) {
            this.$message.error("状态更新失败");
          }
        })
        .catch((e) => {
          this.$message.error("状态更新失败");
        });
    },
    handleDelete(id, index) {
      this.$confirm("此操作将删除该用户数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          console.log("删除", id);
          await deleteUser({ id }).then((res) => {
            if (res.data.tag) {
              console.log(this.tableData, this.tableData[index], index);
              this.tableData.splice(index, 1);
              console.log(this.tableData, this.tableData[index], index);
              this.$message.success("删除成功!");
            } else {
              this.$message.error("删除失败!");
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
  },
  activated() {
    getUsersInfo().then((res) => {
      if (res.data.tag) {
        this.$set(this, "tableData", res.data.data);
        this.total = Math.ceil(this.tableData.length / this.line);
      } else {
        console.log(res, "res");
        this.$message.warning("暂无用户,快去添加吧~");
      }
    });
    console.log(this.activeIndex);
    this.setNotice("用户管理");
  },
};
</script>

<style scoped>
.main {
  display: flex;
  height: 88vh;
  flex-direction: column;
  justify-content: space-between;
}

.table {
  height: 760px;
  overflow: auto;
}

/deep/ .active-row {
  font-size: 18px;
  background: #b7ff91;
  height: 70px;
  box-sizing: border-box;
}
/deep/ .inactive-row {
  font-size: 18px;
  height: 70px;
  box-sizing: border-box;

  background: rgb(255, 225, 170);
}

/deep/ .th {
  height: 60px;
}

.el-table .warning-row {
  background: rgb(223, 175, 88);
}

.el-table .success-row {
  background: #91e962;
}
</style>
